<template>
  <view class="cart">
    <!-- 获取地址 -->
    <view class="cart-site">
      <view v-if="address">
        <view class="cart-top">
          <view>
            {{ address.userName }}
          </view>
          <view>{{ address.telNumber }}</view>
        </view>
        <view class="cart-bom"
          >{{ address.provinceName }}{{ address.cityName
          }}{{ address.countyName }}{{ address.detailInfo }}
        </view>
      </view>
      <view class="cart-site" v-else>
        <button @click="chooseAddress">获取收货地址</button>
      </view>
    </view>

    <view class="cart-text">支付商品</view>

    <!-- 购物车内容 -->
    <view class="cart-data">
      <view class="cart-goods" v-for="(item, index) in carts" :key="index">
        <!-- 图片 -->
        <view class="cart-goods-img">
          <image mode="widthFix" :src="item.goods_small_logo"></image>
        </view>
        <!-- 内容 -->
        <view class="cart-goods-content">
          <view class="cart-goods-title">{{ item.goods_name }} </view>
          <view class="cart-goods-info">
            <view class="cart-goods-price">￥{{ item.goods_price }}</view>
            <view class="cart-goods-num">
              <view class="cart-goods-sum">x{{ item.count }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 结算 -->
    <view class="cart-price-tool">
      <view class="cart-Prices">
        <view class="cart-price">
          <view>合计:</view>
          <view class="price">￥{{ sumPrice }}</view>
        </view>
        <view class="freight">包含运费</view>
      </view>
      <view class="cart-clearing"
        >支付({{ clearing }})
        <button open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      carts: [],
      judge: "",
    };
  },

  onShow() {
    let carts = uni.getStorageSync("carts") || [];
    this.carts = carts.filter((v) => {
      return v.checked;
    });
    if (this.carts.length) {
      this.judge = this.carts.every((v) => v.checked == true);
    }
  },

  computed: {
    // 地址
    address() {
      return wx.getStorageSync("address");
    },

    // 结算总数
    clearing() {
      return this.carts.filter((v) => v.checked).length;
    },

    // 总价
    sumPrice() {
      let price = 0;
      this.carts.forEach((v) => {
        if (v.checked) {
          price += v.goods_price * v.count;
        }
      });
      return price;
    },
  },

  methods: {
    //   获取用户信息
    async getUserInfo(e) {
      const { encryptedData, rawData, iv, signature } = e.detail;

      //   code 是执行小程序登录后获取
      const code = (await uni.login())[1].code;

      //   获取token请求
      const res = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin",
        method: "post",
        data: { encryptedData, rawData, iv, signature, code },
      });
      const token = res[1].data.message.token;

      //   获取订单请求
      const goods = this.carts.map((v) => {
        return {
          goods_id: v.goods_id,
          goods_number: v.count,
          goods_price: v.goods_price,
        };
      });
      const order = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create",
        header: { Authorization: token },
        method: "post",
        data: {
          order_price: this.sumPrice,
          consignee_addr:
            this.address.provinceName +
            this.address.cityName +
            this.address.countyName +
            this.address.detailInfo,
          goods,
        },
      });
      const order_number = order[1].data.message.order_number;

      // 获取微信支付所必须参数请求
      const payparams = await uni.request({
        url:
          "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder",
        header: { Authorization: token },
        method: "post",
        data: {
          order_number,
        },
      });
      const pay = await wx.requestPayment(payparams[1].data.message.pay);

      // 查看订单支付状态,只会返回成功
      const paystatus = await uni.request({
        url:
          "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder",
        data: { order_number },
        header: { Authorization: token },
        method: "post",
      });

      //  返回支付成功提示
      uni.showToast({
        title: "支付成功",
      });
    },
  },
};
</script>

<style lang="scss">
.cart {
  .cart-site {
    padding: 20rpx;
    color: #000;
    font-weight: 600;
    button {
      color: $theme-color;
      font-size: 30rpx;
      border: 1rpx solid $theme-color;
    }

    .cart-top {
      display: flex;
      justify-content: space-between;
    }

    .cart-bom {
    }
  }

  .cart-text {
    font-size: 34rpx;
    font-weight: 700;
    padding: 20rpx 10rpx;
    color: $theme-color;
    border-top: 3rpx solid $theme-color;
    border-bottom: 3rpx solid $theme-color;
  }
  .cart-data {
    margin-bottom: 100rpx;
  }
  .cart-goods {
    display: flex;
    align-items: center;
    border-top: 1rpx solid #eee;
    padding: 20rpx;

    checkbox-group {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      checkbox {
        font-size: 10rpx;
      }
    }
    .cart-goods-img {
      flex: 2;
    }
    .cart-goods-content {
      padding: 15rpx;
      flex: 4;

      .cart-goods-title {
        color: #666;
        @include ellipsis(2);
      }

      .cart-goods-info {
        display: flex;
        height: 100rpx;
        align-items: center;

        .cart-goods-price {
          flex: 1;
          color: $theme-color;
        }
        .cart-goods-num {
          display: flex;
          align-items: center;
          .cart-goods-sum {
            margin: 0 10rpx;
          }
          .cart-goods-update {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ddd;
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }
  }
  .cart-price-tool {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 80rpx;

    checkbox-group {
      flex: 1;
      padding: 10rpx;
    }
    .cart-Prices {
      padding: 0 20rpx;

      .cart-price {
        display: flex;
        align-items: center;
        .price {
          margin-left: 10rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: $theme-color;
        }
      }
      .freight {
        display: flex;
        justify-content: flex-end;
      }
    }
    .cart-clearing {
      position: relative;
      display: flex;
      height: 100%;
      padding: 10rpx 60rpx;
      color: #fff;
      justify-content: center;
      align-items: center;
      background-color: $theme-color;

      button {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
}
</style>
